<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/dropload.css" />
		<style>
			body {
				padding-top: 44px;
			}
			
			.h3title {
				font-size: 16px;
				font-weight: normal;
				line-height: 25px;
			}
			
			.para {
		
				text-overflow: ellipsis;
				font-size: 12px;
				color: #888;
				height: 40px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			.content{
        padding-bottom: 40px;
        background-color: #fff;
    }
    
    .opacity{
        -webkit-animation: opacity 0.3s linear;
        animation: opacity 0.3s linear;
    }
    @-webkit-keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
    @keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
		</style>
	</head>

	<body>
	
		
		
		
		
		
		
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">关注公号</h1>
		</header>
		<div clas="bodycontent">
			
			
			<ul class="mui-table-view">
				
				
			</ul>
			
		</div>
		
		<script type="text/javascript" src="js/jquery-2.1.4.js" ></script>
		<script type="text/javascript" src="js/dropload.js" ></script>
		<script src="js/mui.min.js"></script>
		
		<script>
$(function(){
    // 页数
    var page = 0;
    // 每页展示8个
    var size = 5;

    // dropload
    $('body').dropload({
        scrollArea : window,
        domUp : {
            domClass   : 'dropload-up',
            domRefresh : '<div class="dropload-refresh">↓下拉刷新-自定义内容</div>',
            domUpdate  : '<div class="dropload-update">↑释放更新-自定义内容</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>'
        },
        domDown : {
            domClass   : 'dropload-down',
            domRefresh : '<div class="dropload-refresh">↑上拉加载更多-自定义内容</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>',
            domNoData  : '<div class="dropload-noData">暂无数据-自定义内容</div>'
        },
        loadUpFn : function(me){
            page++;
            // 拼接HTML
            var result ='';
       
          
            $.ajax({
            	async:false,
                type: 'GET',
                url:'https://app.hg707.com/index.php/Home/Animate/index/ajax/1/p/'+page+'',
                dataType: 'json', 
                success: function(data){
                	
                    var arrLen=data.data.length;
                    console.log(arrLen);
                    if(arrLen > 0){
                       for(var i=0; i<arrLen; i++){
							//console.log(data[i]);
							result +=   '<li class="mui-table-view-cell opacity">'
											+'<h3 class="h3title">'+data.data[i].title+'</h3>'
											+'<p class="para">'+data.data[i].summary+'</p>'
									   +'</li>';
                        }
                    // 如果没有数据
                    }else{
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        // 插入数据到页面，放到最后面
                        $('.mui-table-view').append(result);
                        // 每次数据插入，必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                  me.resetload();
                }
            });
        },
        
        //下拉刷新
        loadDownFn : function(me){
            page++;
            // 拼接HTML
            var result ='';
       
          
            $.ajax({
            	async:false,
                type: 'GET',
                //url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
                url:'https://app.hg707.com/index.php/Home/Animate/index/ajax/1/p/'+page+'',
                dataType: 'json', 
                success: function(data){
                	
                    var arrLen=data.data.length;
                    console.log(arrLen);
                    if(arrLen > 0){
                       for(var i=0; i<arrLen; i++){
                       
//                          result +=   '<a class="item opacity" href="'+data[i].link+'">'
//                                          +'<img src="'+data[i].pic+'" alt="">'
//                                          +'<h3>'+data[i].title+'</h3>'
//                                          +'<span class="date">'+data[i].date+'</span>'
//                                      +'</a>';
							//console.log(data[i]);
							result +=   '<li class="mui-table-view-cell opacity">'
											+'<h3 class="h3title">'+data.data[i].title+'</h3>'
											+'<p class="para">'+data.data[i].summary+'</p>'
									   +'</li>';
                        }
                    // 如果没有数据
                    }else{
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        // 插入数据到页面，放到最后面
                        $('.mui-table-view').append(result);
                        // 每次数据插入，必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                  me.resetload();
                }
            });
        },
         threshold : 50
    });
});
function getdata(data){
	return data;
}
</script>
		
		
	</body>

</html>